import config from '../config';
import { CellGroup } from './CellGroup';
import { ICell } from './ICell';

let timer: any = null;


class Map {

    private cellGroup: CellGroup = new CellGroup();

    constructor(
        protected app: HTMLDivElement = document.querySelector('#app')!,
        protected el: HTMLCanvasElement = document.createElement('canvas')!,
        private btns: HTMLDivElement = document.querySelector('#btns')!,
        public ctx = el.getContext('2d')!
    ) { }

    public init() {
        timer = null; 
        this.createCanvas();
        this.render([]);
        this.bindEvent();
        return this;
    }

    public start() {
        const startBtn = document.createElement('button');
        startBtn.innerText = '开始';
        this.btns.insertAdjacentElement('afterbegin', startBtn);
        startBtn.addEventListener('click', () => {
            if (timer) return;
            timer = setInterval(() => {
                this.runGame();
            }, config.timeOut);
        });
        return this;
    }

    public pause() {
        const startBtn = document.createElement('button');
        startBtn.innerText = '暂停';
        this.btns.insertAdjacentElement('afterbegin', startBtn);
        startBtn.addEventListener('click', () => {
            clearInterval(timer);
            timer = null; 
        });
        return this;
    }

    public stop() {
        const startBtn = document.createElement('button');
        startBtn.innerText = '停止';
        this.btns.insertAdjacentElement('afterbegin', startBtn);
        startBtn.addEventListener('click', () => {
            clearInterval(timer);
            timer = null;
            this.cellGroup.clearAliveCell();
            this.init();
        });
        return this;
    }

    public next() {
        const nextBtn = document.createElement('button');
        nextBtn.innerText = '下一步';
        this.btns.insertAdjacentElement('afterbegin', nextBtn);
        nextBtn.addEventListener('click', () => {
            this.runGame();
        });
        return this;
    }

    private runGame() { 
        this.cellGroup.moveToNext();
        this.render(this.cellGroup.getAliveCells());
    }

    private bindEvent() {
        this.el.addEventListener('click', e => {
            // if (timer) return;
            this.setCellPosition(e);
        });
        this.el.onmousedown = () => {
            this.el.onmousemove = (e: MouseEvent) => {
                // if (timer) return;
                this.setCellPosition(e);
            };
            this.el.onmouseup = () => {
                this.el.onmousemove = null;
                this.el.onmouseup = null;
            };
        };
    }

    private setCellPosition(e: MouseEvent) {
        if (timer != null) {
            return;
        }
        const x = Math.floor((e.clientX - this.app.offsetLeft) / config.cell.width);
        const y = Math.floor((e.clientY - this.app.offsetTop) / config.cell.height);

        this.cellGroup.addAliveCell(x, y);
        this.render(this.cellGroup.getAliveCells());
    }

    protected createCanvas() {
        this.el.width = config.board.width;
        this.el.height = config.board.height;
        this.el.setAttribute('id', 'board');
        this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
        this.ctx.fillRect(0, 0, config.board.width, config.board.height);
        this.createLine();
        this.app.insertAdjacentElement('afterbegin', this.el);
    }

    protected createLine() {
        // 3. 采用遍历的方式，绘画x轴的线条
        var xLineTotals = Math.floor(config.board.height / config.cell.height); // 计算需要绘画的x轴条数
        for (var i = 0; i < xLineTotals; i++) {
            this.ctx.beginPath(); // 开启路径，设置不同的样式
            this.ctx.moveTo(0, config.cell.height * i - 0.5); // -0.5是为了解决像素模糊问题
            this.ctx.lineTo(config.board.width, config.cell.height * i - 0.5);
            this.ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
            this.ctx.stroke();
        }

        // 4.采用遍历的方式，绘画y轴的线条
        var yLineTotals = Math.floor(config.board.width / config.cell.height); // 计算需要绘画y轴的条数
        for (var j = 0; j < yLineTotals; j++) {
            this.ctx.beginPath(); // 开启路径，设置不同的样式
            this.ctx.moveTo(config.cell.height * j, 0);
            this.ctx.lineTo(config.cell.height * j, config.board.height);
            this.ctx.strokeStyle = "#ccc"; // 设置每个线条的颜色
            this.ctx.stroke();
        }
    }
 
    protected render(cellMatrix: ICell[]) {
        this.ctx.clearRect(0, 0, config.board.width, config.board.height);
        this.createLine();
        cellMatrix.forEach((item) => {
            this.ctx.fillStyle = 'red';
            this.ctx.fillRect(item.x * config.cell.width, item.y * config.cell.height, config.cell.width, config.cell.height);
        });
    }


}
export default new Map();
